<template>
    <h1>商品列表</h1>
    <el-table v-loading="Loading" :data="Allgoods" style="width: 100%">
        <el-table-column prop="proid" label="编号" width="200" />
        <el-table-column label="图片" width="100">
            <template #default="scope">
                    <img class="img" :src="scope.row.img1" />
                </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" width="180" />
        <el-table-column prop="brand" label="品牌" width="160"/>
        <el-table-column prop="originprice" label="价格" width="80"/>
        <el-table-column prop="discount" label="折扣" width="80" />
        <el-table-column prop="sales" label="销量" width="100"/>
        <el-table-column prop="stock" label="库存" width="100"/>
       
    </el-table>
    <el-pagination :page-size="params.limitNum" background layout="prev, pager, next" :total="number" @current-change="changePage" />
</template>

<script setup lang="ts">
// import { List } from "@element-plus/icons-vue";
import { Loading } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import service from "../../../utils/service";
interface gooslist {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}
const Loading=ref(true)
const Allgoods = reactive<gooslist[]>([]);
const params = reactive<{
    count: number,
    limitNum: number
}>({
    count: 1,
    limitNum: 12
})
const number = ref(0);
const getList = () => {
    service({
        url: "/pro/list",
        params

    }).then(res => {
        if (res.data.code === "200") {
            number.value = res.data.total;
            Allgoods.length = 0;
            Allgoods.push(...res.data.data)
            Loading.value=false
        }
    })
}
getList()
const changePage = (value: number) => {

    params.count = value;
    getList();
}



</script>

<style  scoped>
.img {
    width: 100px;
    height: 75px;
}
</style>